import AbstractField from '@/components/hhd/design/FormDesigner/field/comps/AbstractField';
import {createDefaultFieldElement} from '@/utils/FormDesignUtils';
import {createField} from '@/components/hhd/design/FormDesigner/types';
import {guid, isEmpty} from '@/utils';
import $ from 'jquery';
import {message} from "ant-design-vue";

export default class CheckBox extends AbstractField {
  getFieldComponentTitle() {
    return '复选';
  }

  getFieldComponentName() {
    return 'checkbox';
  }

  getDefaultConfig() {
    return new Promise((resolve) => {
      let field = createField();
      field.id = guid();
      field.component = 'checkbox';
      field.fieldName = '复选';
      field.label = '复选';
      field.placeholder = '请选择';
      field.length = 2;
      resolve(field);
    });
  }

  checkField(field) {
    if (super.checkField(field)) {
      // if (isEmpty(field.dict)) {
      //   message.error(field.label + ' 枚举值不能为空');
      //   return false;
      // } else
      //   return true;
      return true
    } else {
      return false;
    }
  }

  createFieldElement() {
    return new Promise((resolve) => {
      resolve(this.createDefaultFieldElement());
    });
  }

  setFieldTitle(el, fieldConfig) {
    $(el).find('span[data-role=field-title]').html(fieldConfig.label);
  }

  createDefaultFieldElement() {
    let res = createDefaultFieldElement();
    res.style.borderColor = 'white';
    res.innerHTML = '<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span data-role="field-title">复选</span></label></div>';
    return res;
  }
};
